<template>
  <div class="report-list-container">
    <!-- 报告列表容器 -->
    <el-card class="report-card" shadow="hover">
      <div class="card-title">报告列表</div>

      <!-- 搜索区域 -->
      <el-form :model="queryParams" inline class="search-form">
        <el-form-item label="事件名称">
          <el-select
            v-model="queryParams.eventName"
            placeholder="请选择事件名称"
            style="width: 180px"
          >
            <el-option
              label="2024年12月11日汤营超标"
              value="20241211tycb"
            ></el-option>
            <el-option
              label="2024年12月15日河道治理"
              value="20241215hdzl"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标题">
          <el-input
            v-model="queryParams.title"
            placeholder="请输入标题"
            style="width: 180px"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset" style="margin-left: 8px"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 操作按钮区域 -->
      <div class="operate-bar">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          @click="handleAdd"
          class="btn-add"
          >新增</el-button
        >
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          @click="handleEdit"
          :disabled="selectedRows.length !== 1"
          class="btn-edit"
          >修改</el-button
        >
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          @click="handleDelete"
          :disabled="selectedRows.length === 0"
          class="btn-delete"
          >删除</el-button
        >
      </div>

      <!-- 报告表格 -->
      <el-table
        :data="tableData"
        border
        stripe
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column
          prop="eventName"
          label="事件名称"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="title"
          label="标题"
          align="center"
          min-width="120"
        />
        <el-table-column
          prop="reportType"
          label="报告类型"
          align="center"
          min-width="100"
        />
        <el-table-column
          prop="content"
          label="内容"
          align="center"
          min-width="150"
        />
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <el-button type="text" size="small" style="color: #409eff"
              >操作</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增处置报告弹窗（匹配截图样式） -->
    <el-dialog
      title="添加处置报告"
      :visible.sync="addDialogVisible"
      width="700px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form :model="form" label-width="80px" class="add-form">
        <!-- 事件名称 + 标题（同一行） -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="*事件名称">
              <el-select
                v-model="form.eventName"
                placeholder="请选择事件名称"
                style="width: 100%"
              >
                <el-option
                  label="2024年12月11日汤营超标"
                  value="20241211tycb"
                ></el-option>
                <el-option
                  label="2024年12月15日河道治理"
                  value="20241215hdzl"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题">
              <el-input
                v-model="form.title"
                placeholder="请输入标题"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 报告类型（单独一行） -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="报告类型">
              <el-input
                v-model="form.reportType"
                placeholder="请输入报告类型"
                style="width: 200px"
                value="初报、续报、终报"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 内容（富文本编辑器） -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="内容">
              <!-- 全局注册的editor组件 -->
              <editor v-model="form.content" :min-height="192" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAdd">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ReportList",
  data() {
    return {
      // 搜索参数
      queryParams: {
        eventName: "20241211tycb",
        title: "",
      },
      // 表格数据
      tableData: [],
      // 选中的表格行
      selectedRows: [],
      // 新增弹窗控制
      addDialogVisible: false,
      // 新增表单数据
      form: {
        eventName: "20241211tycb", // 默认选中事件名称
        title: "",
        reportType: "初报、续报、终报", // 默认报告类型
        content: "",
      },
    };
  },
  methods: {
    // 搜索报告
    handleSearch() {
      this.$message.info("执行搜索逻辑");
    },

    // 重置搜索条件
    handleReset() {
      this.queryParams = {
        eventName: "20241211tycb",
        title: "",
      };
    },

    // 打开新增弹窗
    handleAdd() {
      // 重置表单
      this.form = {
        eventName: "20241211tycb",
        title: "",
        reportType: "初报、续报、终报",
        content: "",
      };
      this.addDialogVisible = true;
    },

    // 提交新增报告
    submitAdd() {
      // 基础校验
      if (!this.form.eventName) {
        this.$message.error("请选择事件名称");
        return;
      }
      if (!this.form.content) {
        this.$message.error("请填写内容");
        return;
      }

      // 实际项目：调用接口提交数据
      const newReport = {
        eventName:
          this.form.eventName === "20241211tycb"
            ? "2024年12月11日汤营超标"
            : "2024年12月15日河道治理",
        title: this.form.title,
        reportType: this.form.reportType,
        content: this.form.content,
      };
      this.tableData.push(newReport);
      this.addDialogVisible = false;
      this.$message.success("处置报告添加成功");
    },

    // 修改报告
    handleEdit() {
      if (this.selectedRows.length === 1) {
        this.$message.info(`修改报告：${this.selectedRows[0].title}`);
      }
    },

    // 删除报告
    handleDelete() {
      this.$confirm(
        `确定删除选中的${this.selectedRows.length}条报告吗？`,
        "提示",
        { type: "warning" }
      )
        .then(() => {
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

    // 表格行选中事件
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.report-list-container {
  padding: 15px;
  background-color: #f9f9f9;
  min-height: calc(100vh - 20px);

  .report-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 15px;
    }

    // 搜索区域样式
    .search-form {
      margin-bottom: 12px;
      .el-form-item {
        margin-right: 15px;
        margin-bottom: 0;
      }
    }

    // 操作按钮样式
    .operate-bar {
      margin-bottom: 12px;
      .el-button {
        margin-right: 10px;
        &.btn-add {
          background: #e6f7ff;
          border-color: #b3e5fc;
          color: #1890ff;
        }
        &.btn-edit {
          background: #f0f9eb;
          border-color: #c2e7b0;
          color: #52c41a;
        }
        &.btn-delete {
          background: #fff2e8;
          border-color: #ffd8bf;
          color: #fa8c16;
        }
      }
    }

    // 表格样式
    .el-table {
      --el-table-row-hover-bg-color: #fafafa;
      .el-table-column {
        .cell {
          white-space: nowrap;
        }
      }
    }
  }

  // 新增弹窗表单样式
  .add-form {
    .el-form-item {
      margin-bottom: 15px;
    }
  }
}
</style>
